// var leftList = ['新品',
// 	'海南鸡饭精选套餐',
// 	'佐大狮臻选套餐',
// 	'泰式冬阴功系列（面）',
// 	'泰式冬阴功系列（面）',
// 	'品质蒜香耗油时蔬',
// 	'特色小吃',
// 	'开胃畅饮',
// 	'时蔬套餐',
// 	'调料'
// ];
// var item = '';
// for (var i = 0; i < leftList.length; i++) {
// 	item += '<div class="main-left-item" onclick="show(this)">' +
// 		'<p>' + leftList[i] + '</p>' +
// 		'</div>';
// }

// $(".main-left").append(item);

function show(dom) {
	var olds = document.getElementsByClassName("main-left-item");
	// 改变背景色之前,把所有div的背景颜色重置
	for (var i = 0; i < olds.length; i++) {
		olds[i].style.background = '#F8F8F8';
		olds[i].style.color = '#666';
	}
	dom.style.background = "white";
	dom.style.color = "#333";
}

$.ajax({
	//请求路径
	url: '../JSON/goods.json',
	// 向后台发送的参数(请求参数)
	data: {},
	//请求方式(get请求)
	type: 'get',
	//返回的数据类型
	dataType: 'json',
	//成功的回调函数(data就是返回的数据)
	success: function(data) {
		// 渲染左侧菜单项
		var item = '';
		// 渲染右侧分类
		var category = '';
		for (var i = 0; i < data.data.length; i++) {
			item += '<div class="main-left-item" onclick="show(this)">' +
				'<p>' + data.data[i].title + '</p>' +
				'</div>';
			category += '<div id="category' + i + '"' + 'class="main-right-category">' +
				'<p class="category-title">' + data.data[i].title + '</p>' + '</div>'
		}
		$(".main-left").append(item);
		$(".main-right").append(category);
		// 循环分类数组,给每一个分类div 添加卡片
		for (var i = 0; i < data.data.length; i++) {
			// 定义商品卡片
			var itemCard = "";
			//定义id
			var id = "#category" + i;
			//标签累加
			for (var j = 0; j < data.data[i].goods.length; j++) {
				var item = data.data[i].goods[j]
				itemCard += '<div class="category-good">' +
					'<img class="category-good-logo"' +
					'src="' + item.img + '"/>' +
					'<p class="category-good-title">' + item.title + '</p>' +
					'<p class="category-good-memo">' + item.memo + '</p>' +
					'<p class="category-good-cell">月售15分 好评率67%</p>' +
					'<p class="category-good-discount"><span>' + item.discount + '</span>每单限8份优惠 </p>' +
					'<p class="category-good-money">' +
					'¥' + item.price + '<span>¥' + item.oldPrice + '</span>' +
					'</p>' +
					'<img class="category-good-add" src="../IMG/detail/add.png" />' +
					'</div>';
			}
			//渲染元素
			$(id).append(itemCard);
		}
	}
})
